<template>
    <div class="hospital-detail">
        <!-- 页面标题 -->
        <div class="title">
            <h2>医院详情</h2>
            <el-button type="primary" @click="goBack" style="float: right;">返回</el-button>
        </div>

        <!-- 基本信息 -->
        <div class="basic-info">
            <div class="info-header">基本信息</div>
            <div class="info-content">
                <div class="image-container">
                    <img :src="hospital.hospitalImg" style="width: 150px; height: 150px;" />

                </div>
                <div class="info-table">
                    <table>
                        <tr>
                            <td>ID</td>
                            <td>{{ hospital.hospitalId }}</td>
                            <td>医院名称</td>
                            <td>{{ hospital.name }}</td>
                        </tr>
                        <tr>
                            <td>是否推荐</td>
                            <td>{{ hospital.isHospital ? '是' : '否' }}</td>
                            <td>医生人数</td>
                            <td>{{ hospital.hospitalCount }}</td>
                        </tr>
                        <tr>
                            <td>科室数</td>
                            <td>{{ hospital.hospitalCountTow }}</td>
                            <td>所在地区</td>
                            <td>{{ hospital.hospitalAddTow }}</td>
                        </tr>
                        <tr>
                            <td>详细地址</td>
                            <td colspan="3">{{ hospital.hospitalAddTow }}</td>
                        </tr>
                        <tr>
                            <td>医院电话</td>
                            <td colspan="3">{{ hospital.hospitalPhone }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- 科室 -->
        <div class="departments">
            <div class="section-header">科室</div>
            <div class="department-list">
                <div v-for="(category, index) in hospital.departments" :key="index" class="category">
                    <div class="category-name">{{ category.name }}</div>
                    <div class="sub-departments">
                        <span v-for="(dept, idx) in category.subDepartments" :key="idx" class="department-item">
                            {{ dept }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 简介 -->
        <div class="introduction">
            <div class="section-header">简介</div>
            <div class="intro-content">
                {{ hospital.intro }}
            </div>
        </div>
    </div>
</template>
<script lang="js" setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { Filter, RefreshRight } from '@element-plus/icons-vue'
import { Read, Write } from '@/Http/Axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useCounterStore } from '@/stores/counter'
import router from '@/router'
import { pa } from 'element-plus/es/locales.mjs'
import { useRoute } from 'vue-router'
const route = useRoute()
const store = useCounterStore()


const hospital = ref([
    {
        "hospitalId": 7,
        "name": "解放军总医院",
        "hospitalImg": "http://localhost:5047/carousimg/2.webp",
        "isHospital": true,
        "hospitalCount": 2035,
        "hospitalCountTow": 302,
        "hospitalAdd": null,
        "hospitalAddTow": "沈阳市",
        "hospitalPhone": "辽北",
        "departments": [],
        "intro": "",
        "createName": "阿莱",
        "createTime": "2025-11-03T11:04:05.462574",
        "isDeleted": false,
        "head": "三甲"
    }
])


const getHospital = async () => {
    var id = route.query.hospitalId
    Read.get("/QueryHospital", {
        params: {
            HospitalId: id
        }
    }).then(res => {
        hospital.value = res.data.data
    })
}
//钩子函数
onMounted(() => {
    getHospital()
})
const goBack = () => {
    router.push('/HospitalShowView')
}



</script>




<style>
.hospital-detail {
    padding: 20px;
    background-color: #f5f7fa;
}

.title {
    margin-bottom: 20px;
}

.basic-info {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.info-header {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.info-content {
    display: flex;
    gap: 20px;
}

.image-container {
    width: 200px;
    height: 150px;
    overflow: hidden;
    border-radius: 8px;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-table {
    flex: 1;
    border-collapse: collapse;
    width: 100%;
}

.info-table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

.info-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.departments {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-header {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.department-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.category {
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
}

.category-name {
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.sub-departments {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.department-item {
    padding: 5px 10px;
    background-color: #eef2ff;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
}

.introduction {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.intro-content {
    line-height: 1.8;
    color: #333;
    font-size: 14px;
}
</style>